<template>
  <el-card class="container" v-loading="loading">
    <el-row :gutter="32" v-if="data.allAmount">
      <el-col :span="6">
        <trend-data :data="data" />
      </el-col>
      <el-col :span="18">
        <trend-chart :data="data" />
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { getChartTrend } from '@/api/chart.js'
import TrendData from './trend-data.vue'
import TrendChart from './trend-chart.vue'
import { useRequest } from "vue-request"
import { onActivated } from 'vue'
const { loading, data, run: getChartTrendData } = useRequest(async () => await getChartTrend(), {
  manual: true,
  initialData: {}
})
onActivated(() => {
  getChartTrendData()
})
</script>

<style lang="scss" scoped>
.container {
  height: 286px;
}
</style>